/**
 * Created by Ysssssss on 2021/5/24.
 */
import React, {forwardRef, useCallback, useContext, useState} from "react";
import CustomizeModal, {CustomizeModalButton, CustomizeModalContext} from "@common/presentational/CustomizeModal";
import {useDispatch} from "react-redux";
import notify from "@utils/tip";
import {createShelfGroup, editShelfGroup} from "@sagas/shoppingMall/shoppingMallProduct";
import { Row, Col, Input } from "antd";


const ShelfGroupInfoContent = props => {
    const { callback } = props
    const { hide, params } = useContext(CustomizeModalContext)
    const { id, name: initName = '' } = params
    const dispatch = useDispatch()
    const [name, setName] = useState(initName)

    const handleNameChange = useCallback(e => {
        setName(e.currentTarget.value)
    }, [])

    const submitShelfGroup = () => {
        if (!name) {
            notify('请输入名称')
            return;
        }
        if (id) {
            dispatch(editShelfGroup({
                id,
                name,
            }, () => {
                callback && callback()
                hide()
            }))
        } else {
            dispatch(createShelfGroup({
                name,
            }, () => {
                callback && callback()
                hide()
            }))
        }
    }
    return (
        <>
            <Row className="modal-line">
                <Col span={6}>名称</Col>
                <Col span={18}>
                    <Input onChange={handleNameChange}
                           value={name}
                    />
                </Col>
            </Row>
            <CustomizeModalButton
                onOk={submitShelfGroup}
                onCancel={hide}
            />
        </>
    )
}


export const CreateShelfGroupModal = forwardRef((props, ref) => (
    <CustomizeModal title="创建分组" ref={ref}>
        <ShelfGroupInfoContent {...props}/>
    </CustomizeModal>
))
export const EditShelfGroupModal = forwardRef((props, ref) => (
    <CustomizeModal title="编辑分组" ref={ref}>
        <ShelfGroupInfoContent {...props}/>
    </CustomizeModal>
))